<template>
  <div class="cutPriceMy">
    <div class="flex header">
      <img :src="userInfo.avatar" alt="" />
      <div class="name">{{ userInfo.nickname }}</div>
    </div>
    <div class="content">
      <div class="goods">
        <div class="explain">
          <div class="title" style="font-weight:600">当前砍价商品</div>
          <div @click="explain" class="text"><img src="../../assets/images/cutPrice/toast1.png"/>发货与物流说明</div>
        </div>
        <div class="null" v-if="orderList.length == 0">
          <img class="" src="../../assets/images/cutPrice/null.png" alt="" />
          <div>暂无订单</div>
        </div>
        <template v-for="item in orderList">
          <div :key="item.price" class="flex goods_item" @click="goDetail(item.unique_key)">
            <img :src="item.image" alt="" />
            <div class="goods_right">
              <div class="title">{{ item.goods_name }}</div>
              <div>
                <span class="price">当前价格:</span>
                <span class="font_12">￥</span>
                <span class="font_18">{{ item.pay_price }}</span>
              </div>
              <div class="font_12">已砍:￥{{ item.already_price }}</div>
              <div class="end" v-if="item.is_close == 3">
                <!-- <div class="time">{{ leftTimer(item.order_end_time) }}</div> -->
                <van-count-down :time="item.order_end_time" />
              </div>
              <template v-else>
                <div class="order_over" :style="item.is_close == 2 ? 'background: #DDDDDD;color: rgba(102, 102, 102, 1);' : 'background: rgba(255, 58, 57, 0.1);color: #FF3C39;' ">{{ item.is_close == 2 ? '订单已关闭' : '已付款' }}</div>
              </template>
            </div>
          </div>
        </template>
      </div>
      <div class="incomeDetails">
        <template v-if="recordList.length == 0">
          <div class="title" style="font-weight:600">收益明细</div>
          <div class="null">
            <img class="" src="../../assets/images/cutPrice/null.png" alt="" />
            <div>暂无收益</div>
          </div>
        </template>
        <template v-if="recordList.length > 0">
          <div class="flex incomeDetails_header">
            <div class="title">收益明细</div>
            <div>
              <span class="font_12">总计:</span
              ><span class="font_18">￥{{ totalPrice }}</span>
            </div>
          </div>
          <div style="margin-top: .38rem;">
            <template v-for="item in recordList">
              <div :key="item.price" class="flex item">
                <div class="item_left">
                  <div class="name">{{ item.nickname }}</div>
                  <div class="time">{{ format(item.addtime) }}</div>
                </div>
                <div>
                  <div class="price">{{ item.cash_back }}</div>
                </div>
              </div>
            </template>
          </div>
        </template>
      </div>
      <div class="flex reflect" v-if="from1 != 'app'">
        <div class="text">快去下载听见广播APP—我的—钱包提现</div>
        <div class="btn" @click="downLoad()">去提现</div>
      </div>
    </div>
        <!-- 发货与物流说明 -->
    <div class="ruleBox" v-show="isRule == 1">
      <div class="ruleTip">
        <p class="ruleTitle">发货与物流说明</p>
          <div class="rulecenter">
            <p><span>优先发货：</span>分享活动晒图优先发货，具体分享规则请看活动规则第8条。</p>
            <p style="margin-top:0.4rem"><span>物流查询：</span>登录听见广播APP，点击“我的-我的订单”查看物流。</p>
          </div>
        </div>
        <div class="close" @click="close()">
          <img src="../../assets/images/cutPrice/close.png" alt="" />
        </div>
    </div>
  </div>
</template>
<script>
import { userCenterList, userCenteRecordlist } from "@api/cutPrice";
import  base  from "@common/base.js"
import { VUE_APP_WS_URL } from "@utils/index";
import shareMsg from "@common/shareConfig.js";
import share from "@common/share.js";
import Vue from "vue";
import { CountDown } from "vant";
import { deviceType } from "@utils";
import cookie from "js-cookie";
Vue.use(CountDown);
export default {
  name: "cutPriceMy",
  data() {
    return {
      userInfo: [],
      orderList: [],
      recordList:[],
      totalPrice:0,
      from1:'',
      endShow:'',
      shareShow:0,
      isRule:'0',
    };
  },
  components: {},
  methods: {
    explain(){
      this.isRule = "1";
      document.querySelector('html').style.position ='fixed';
      document.querySelector('html').style.top ='0';
      document.querySelector('html').style.bottom ='0';
    },
    close() {
      this.isRule = "0";
      document.querySelector('html').style.position ='static';
      // $("html").css("position", "static");
    },
    goDetail(order_id){
      this.$router.push({ path: `/cutPrice/cutPriceDetails?order_id=${order_id}${this.from1 == 'app'?'&from1=app':''}` })
    },
    getUserCenterList() {
      let _this = this;
      userCenterList({})
        .then(res => {
          res.data.user_info.avatar = base.imgUrl() + res.data.user_info.avatar 
          _this.userInfo = res.data.user_info;
          _this.orderList = res.data.order_list;
          // this.$dialog.loading.close();
          // _this.beginTimer()
        })
        .catch(res => {
          _this.$dialog.error(res.msg);
        });
    },
    getUserCenteRecordlist() {
      let _this = this;
      userCenteRecordlist({})
        .then(res => {
          _this.recordList = res.data.record;
          _this.totalPrice = res.data.total_price;
        })
        .catch(res => {
          _this.$dialog.error(res.msg);
        });
    },
    leftTimer(times) {
      let hour = parseInt(times/3600)
      let minute = parseInt(times%3600/60)
      let second = parseInt(times%60)
      if (hour <= 9) hour = "0" + hour;
      if (minute <= 9) minute = "0" + minute;
      if (second <= 9) second = "0" + second;
      return  hour + ":" + minute + ":" + second;
    },
    beginTimer() {
      let _this = this;
      var timer = setInterval(() => {
        for (let i = 0; i < _this.orderList.length; i++) {
          const item = _this.orderList[i];
          if (item.order_end_time > 0) item.order_end_time--;
          _this.leftTimer(item.order_end_time);
          if (item.order_end_time <= 0) {
            clearInterval(timer);
          }
        }
      }, 1000);
    },
    add0(m){
      return m<10?'0'+m:m
    },
    format(dataTime){
      var time = new Date(dataTime * 1000);
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);
    },
    downLoad(){
      window.location.href = 'http://share.cbct.cn/downloadPage'
    },
    // 分享
    shareInfo() {
      if(this.endShow==1){
        this.shareShow=0
      }else{
        this.shareShow=1
      }
      let shareUrl = `${VUE_APP_WS_URL}cutPrice/cutPriceIndex?shareUserId=`+cookie.get('cutUid');
      if (this.$route.query.from1 == "app") {
        shareMsg.shareConfig(
          "app",
          "0",
          "0",
          "听见广播年货节  爆款好物千万补贴",
          "直接降!快去抢啊!",
          shareUrl,
          "http://img001.seefm.com.cn/image/bargain_share_2021.png",
          "",
          this.shareShow,
          '0'
        );
      }
      share.share(
        shareUrl,
        "听见广播年货节  爆款好物千万补贴",
        "直接降!快去抢啊!",
        "http://img001.seefm.com.cn/image/bargain_share_2021.png"
      );
      share.QQshare(
        shareUrl,
        "听见广播年货节  爆款好物千万补贴",
        "直接降!快去抢啊!",
        "http://img001.seefm.com.cn/image/bargain_share_2021.png"
      );
    },
    // 获取app登录状态
    onWebResponse: function(str) {
      let self =this;
      let obj = JSON.parse(str);
      let action = obj.action;
      let content = obj.content;
      if (action == "setUserInfo") {
        let isToken = content.ds_token;
          cookie.set("token", content.token);
          cookie.set("salt", content.salt);
          this.$store.commit("LOGIN", isToken);
      }
      self.getUserCenterList();
      self.getUserCenteRecordlist();
    }
  },
  created() {
    if (this.$route.query.from1) {
      this.from1 = this.$route.query.from1;
    }
    if (this.$route.query.endShow) {
      this.endShow = this.$route.query.endShow;
    }
    // this.$dialog.loading.open("正在加载中");
    //存下当前页面路径，登录以后回跳
    localStorage.cutUrl=window.location.href;
  },
  mounted(){
    let _this = this 
    if (_this.$route.query.from1 == 'app') {
      if(deviceType() === 'android') this.appBridge("title", { title: "个人中心" });
      this.appBridge("getParameter", { method: "setUserInfo" });
      // window["onWebResponse"] = str => {
      //   _this.onWebResponse(str);
      // };
    }
    _this.shareInfo(_this.endShow)
    _this.getUserCenterList();
    _this.getUserCenteRecordlist();
  },
  filters: {
  },
};
</script>
<style scoped lang="scss">
.cutPriceMy {
  min-height: 100vh;
  background: RGBA(255, 255, 255, 1);
  .header {
    width: 100%;
    height: 2.2rem;
    justify-content: center;
    background: linear-gradient(270deg, #fb6c1d 0%, #f32a4b 100%);
    img {
      width: 1.28rem;
      height: 1.28rem;
      border: 1px solid #ffffff;
      border-radius: 50%;
    }
    .name {
      font-size: 0.4rem;
      color: #ffffff;
      margin-left: 0.24rem;
    }
  }
  .content {
    margin-top: 0.52rem;
    padding: 0 0.3rem 1.36rem;
    .null {
      text-align: center;
      margin: 61px 0 95px;
      img {
        width: 93px;
        height: 81px;
      }
      div {
        margin-top: 0.16rem;
        font-size: 0.24rem;
        color: rgba(0, 0, 0, 0.5);
      }
    }
    .title {
      font-size: 0.32rem;
      font-weight: 500;
      color: #000000;
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .font_12 {
      color: #ef3a58;
      font-size: 0.24rem;
    }
    .font_18 {
      color: #ef3a58;
      font-size: 0.36rem;
    }
    .explain{
      display: flex;
      justify-content: space-between;
      .text{
        font-size: 0.22rem;
        color: rgba(0, 0, 0, 0.6);
        img{
          width: 0.22rem;
          height: 0.22rem;
          margin-right: 0.06rem;
        }
      }
    }
    .goods_item {
      margin: 0.2rem 0;
      img {
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 0.02rem;
      }
      .goods_right {
        margin-left: 0.4rem;
        height: 2.4rem;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-around;
        .title{
          padding: 0.16rem 0 0.15rem;
        }
        .font_12{
          padding: 0.18rem 0 0.18rem;
        }
        .price {
          font-size: 0.28rem;
          color: #7c7c90;
        }
        .end {
          width: 3rem;
          height: 0.4rem;
          background-image: url("../../assets/images/cutPrice/end_time.png");
          background-size: 100% 100%;
          border-radius: 0.12rem;
          display: flex;
          flex-direction: row-reverse;
          div {
            width: 1.72rem;
            line-height: 0.4rem;
            color: rgba(255, 60, 57, 1);
            text-align: center;
            // margin-right: 0.14rem;
          }
        }
        .order_over{
          width: 3.22rem;
          height: 0.4rem;
          line-height: .45rem;
          text-align: center;
          // color: rgba(102, 102, 102, 1);
          font-size: 0.24rem;
          // background: #DDDDDD;
          border-radius: 0.12rem;
        }
      }
    }
    .incomeDetails {
      margin-top: 0.52rem;
      .incomeDetails_header {
        justify-content: space-between;
        color: #ff3c39;
      }
      .item {
        height: 1.16rem;
        justify-content: space-between;
        border-bottom: 0.01rem solid rgba(0, 0, 0, 0.1);
        .item_left {
          height: 100%;
          padding: 0.08rem 0;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
        .name {
          width: 5.4rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 0.28rem;
          font-weight: 400;
          color: #000000;
        }
        .time {
          font-size: 0.24rem;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.5);
        }
        .price {
          font-size: 0.28rem;
          font-weight: 400;
          color: rgba(0, 0, 0, 1);
        }
        .right {
          font-size: 0.34rem;
          color: rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
  .reflect {
    width: 100%;
    height: 1.36rem;
    line-height: 1.36rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background: white;
    box-shadow: 0px -2px 5px 0px rgba(252, 135, 135, 0.2);
    justify-content: space-around;
    .text {
      font-size: 0.28rem;
      color: rgba(0, 0, 0, 1);
    }
    .btn {
      width: 1.68rem;
      height: 0.6rem;
      line-height: 0.6rem;
      background: #ff4e51;
      color: white;
      box-shadow: 0px 0px 0px 0px #ce0000;
      border-radius: 0.3rem;
      text-align: center;
      justify-content: space-around;
    }
  }
  .flex {
    display: flex;
    align-items: center;
  }
}
.ruleBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  z-index: 101;
  .ruleTip {
    width: 6.12rem;
    // height: 70vh;
    background: #ffffff;
    border-radius: 0.08rem;
    margin: 30vh auto 0.3rem;
    box-sizing: border-box;
  }
  .ruleTitle {
    font-size: 0.36rem;
    color: #000;
    font-weight: 600;
    text-align: center;
    padding: 0.46rem 0;
    box-sizing: border-box;
  }
  .rulecenter {
    width: 5.42rem;
    max-height: 55vh;
    margin: 0 0.36rem;
    padding-bottom:0.66rem;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    p {
      width: 100%;
      box-sizing: border-box;
      text-align: left;
      font-size: 0.28rem;
      line-height: 1.9;
      color: #000;
      span{
        font-weight: 800;
      }
    }
  }
.close {
  width: 0.48rem;
  height: 0.48rem;
  margin: 0 auto;
  img {
    width: 100%;
  }
}
}
</style>
